<template>
	<view>
		<search ref="search" @search="handleSearch" />
		<view v-show="pageShow">
			<view class="list-card" v-if="list.length">
				<uni-card :note="item.outBillState != '500' ? 'true' : ''" v-for="(item, index) in list" :key="index" :title="'出库单号：' + item.billNo">
					<view @click="detail(item)">
						<view class="item">
							<view class="item-content">
								<label>状态：</label>
								<text class="status" :class="{warning: item.outBillState != '500'}">{{item.outBillStateLabel || '-'}}</text>
							</view>
							<view class="item-content">
								<label>类型：</label>
								<text>{{item.outOrderTypeLabel || '-'}}</text>
							</view>
						</view>
						<view class="item">
							<view class="item-content">
								<label>外部单号：</label>
								<text>{{item.outOrderNo || '-'}}</text>
							</view>
							<view class="item-content">
								<label>预期发货：</label>
								<text>{{item.requiredOutTime ? $formatter.formatDate(new Date(item.requiredOutTime)) : '-'}}</text>
							</view>
						</view>
						<view class="item-footer">
							<view class="footer-item">
								<label>总预期量</label>
								<text>{{item.totalExpect ? parseInt(item.totalExpect) : '-'}}</text>
							</view>
							<view class="footer-item">
								<label>总已拣量</label>
								<text>{{computeTotalPickingDeliver(item.pickingList) + computeTotalPickingDeliver(item.deliverList)}}</text>
							</view>
							<view class="footer-item">
								<label>总已发量</label>
								<text>{{computeTotalPickingDeliver(item.deliverList)}}</text>
							</view>
						</view>
					</view>
					<template v-slot:footer>
						<view style="display: flex; justify-content: flex-end; height: 56rpx; margin-top: -10rpx;" v-show="item.outBillState != '100' && item.outBillState != '500'">
							<view style="width: auto;" v-if="(computeTotalPickingDeliver(item.pickingList) + computeTotalPickingDeliver(item.deliverList)) < parseInt(item.totalExpect)">
								<button size="mini" @click="picking(item)">拣货</button>
							</view>
							<view style="width: auto; margin-left: 40rpx;" v-if="computeTotalPickingDeliver(item.pickingList) > 0">
								<button type="primary" size="mini" @click="deliver(item)">发货</button>
							</view>
						</view>
					</template>
				</uni-card>
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</view>
			<no-data :visible="!list.length" title="暂无数据" :fullscreen="true"></no-data>
		</view>
	</view>
</template>

<script>
	import search from './search.vue';
	import uniCard from '@/components/uni-card/uni-card.vue';
	import loadMore from '@/components/uni-load-more/uni-load-more.vue';
	import noData from '@/components/no-data/no-data.vue';

	export default {
		components: {
			search,
			uniCard,
			loadMore,
			noData
		},
		data() {
			return {
				pageShow: false,
				params: {
					limit: global.$limit,
					page: 1,
					warehouseId: this.$storage.getWarehouseId()
				},
				list: [],
				loadMoreStatus: global.$loadMoreStatus.more
			}
		},
		onShow() {
			if (global.$refresh) {
				global.$refresh = false;
				this.load();
			}
		},
		onLoad() {
			this.load();
		},
		onNavigationBarButtonTap() {
			this.$refs.search.open(Object.assign({}, this.params));
		},
		onPullDownRefresh() {
			this.params.page = 1;
			this.fetch();
		},
		onReachBottom() {
			if (this.loadMoreStatus === global.$loadMoreStatus.more) {
				this.loadMoreStatus = global.$loadMoreStatus.loading;
				this.params.page++;
				this.fetch();
			}
		},
		methods: {
			load() {
				uni.showLoading({
					title: '加载中'
				});
				this.fetch();
			},
			handleSearch(param) {
				this.params = Object.assign({}, {
					limit: global.$limit,
					page: 1,
					warehouseId: this.$storage.getWarehouseId()
				}, param);
				this.load();
			},
			computeTotalPickingDeliver(list) {
				if (!list.length) {
					return 0;
				}
				return list.map(v => parseInt(v.amount)).reduce((m, n) => m + n);
			},
			fetch() {
				this.$api.outWarehouse.list(this.params).then(res => {
					this.params.page === 1 && uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					if (res.data.length) {
						this.getPickingDeliverList(res.data).then(_list => {
							this.list = this.params.page === 1 ? [..._list] : [...this.list, ..._list];
							this.loadMoreStatus = this.$pageHelper.lastPage(this.params.limit, this.params.page, res.count) ?
								global.$loadMoreStatus.noMore : global.$loadMoreStatus.more;
							this.pageShow = true;
							uni.hideLoading();
							uni.stopPullDownRefresh();
						});
					} else {
						this.list = this.params.page === 1 ? [...res.data] : [...this.list, ...res.data];
						this.loadMoreStatus = this.$pageHelper.lastPage(this.params.limit, this.params.page, res.count) ?
							global.$loadMoreStatus.noMore : global.$loadMoreStatus.more;
						this.pageShow = true;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				}, () => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			},
			getPickingDeliverList(list) {
				return new Promise(resolve => {
					list.map((v, i) => {
						Promise.all([
							this.$api.outWarehouse.pickingDeliverList({
								outBillId: v.id,
								state: 300,
							}),
							this.$api.outWarehouse.pickingDeliverList({
								outBillId: v.id,
								state: 500,
							})
						]).then(res => {
							v.pickingList = res[0];
							v.deliverList = res[1];
							i === list.length - 1 && resolve(list);
						});
					});
				});
			},
			detail(bill) {
				uni.navigateTo({
					url: '/pages/outWarehouse/detail?bill=' + JSON.stringify(bill)
				});
			},
			picking(bill) {
				uni.navigateTo({
					url: '/pages/outWarehouse/picking?bill=' + JSON.stringify(bill)
				});
			},
			deliver(bill) {
				uni.navigateTo({
					url: '/pages/outWarehouse/deliver?bill=' + JSON.stringify(bill)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}

	.uni-load-more {
		margin-top: -30rpx;
	}
</style>
